var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// 设置图形的填充颜色为红色
context.fillStyle = "red";
// 绘制填充颜色的矩形
context.fillRect(10, 10, 20, 20);

// 设置图形轮廓颜色为绿色
context.strokeStyle = "#0f0";
// 绘制矩形边框
context.strokeRect(50, 10, 20, 20);


// 这些 fillStyle 的值均为 '红色'
context.fillStyle = "red";
context.fillStyle = "#ff0000";
context.fillStyle = "rgb(255, 0, 0)";
context.fillStyle = "rgba(255, 0, 0, 1)";



context.beginPath();

// 绘制圆形区域
context.arc(40, 40, 20, 0, Math.PI * 2, false);


context.closePath();
// 设置宽度为5
context.lineWidth = 5;
// 使用stroke 绘制轮廓
context.stroke(); 

